import styles from './index.module.less';
import { Dropdown } from 'antd';
import { RecursionMenu } from '@hdtd/components/test';
import type { TRecursionMenuConfigItem, IRecursionMenuRenderItem } from '@hdtd/components/test';
import { useEffect } from 'react';
import classNames from 'classnames';
import { useLocation, useNavigate } from 'react-router';

const mock: Array<TRecursionMenuConfigItem> = [
  {
    key: '1',
    label: '菜单1',
    interruptRecursion: true,
    children: [
      {
        key: '1-1',
        label: '菜单1-1'
      },
      {
        key: '1-2',
        label: '菜单1-2',
        level: '2',
        children: [
          {
            key: '1-1-1',
            label: '菜单1-1-1'
          },
          {
            key: '1-1-2',
            label: '菜单1-1-2',
            children: [
              {
                key: '1-1-2-1',
                label: '菜单1-1-2-1'
              },
              {
                key: '1-1-2-2',
                label: '菜单1-1-2-2'
              }
            ]
          },
          {
            key: '1-1-3',
            label: '菜单1-1-3'
          }
        ]
      }
    ]
  },
  {
    key: '2',
    label: '菜单2',
    children: [
      {
        key: '2-1',
        label: '菜单2-1'
      },
      {
        key: '2-2',
        label: '菜单2-2',
        level: '2',
        children: [
          {
            key: '2-1-1',
            label: '菜单2-1-1'
          },
          {
            key: '2-1-2',
            label: '菜单2-1-2',
            children: [
              {
                key: '2-1-2-1',
                label: '菜单2-1-2-1'
              },
              {
                key: '2-1-2-2',
                label: '菜单2-1-2-2'
              }
            ]
          },
          {
            key: '2-1-3',
            label: '菜单2-1-3'
          }
        ]
      }
    ]
  },
  {
    key: '3',
    label: '菜单3',
    children: [
      {
        key: '3-1',
        label: '菜单3-1'
      },
      {
        key: '3-2',
        label: '菜单3-2',
        level: '2',
        children: [
          {
            key: '3-1-1',
            label: '菜单3-1-1'
          }
        ]
      }
    ]
  }
];
const RMTest = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const itemClickHandler = (key: string) => {
    navigate(`${location.pathname}#${key}`);
  };
  const renderItem: IRecursionMenuRenderItem = (item, childrenNode, parentLevel, activePath) => {
    if (parentLevel === 'root' && item.interruptRecursion) {
      return (
        <div key={item.key} className={classNames(styles['menu-item'])}>
          <Dropdown
            menu={{
              items: item.children ?? [],
              selectedKeys: activePath?.map((pathItem) => pathItem.key),
              onClick: ({ key }) => itemClickHandler(key)
            }}
          >
            <div
              className={classNames({
                [styles.active]: activePath?.includes(item)
              })}
              onClick={() => itemClickHandler(item.key)}
            >
              {item.label}
            </div>
          </Dropdown>
        </div>
      );
    }
    return (
      <div key={item.key} className={classNames(styles['menu-item'])}>
        <div
          className={classNames({
            [styles.active]: activePath?.includes(item)
          })}
          onClick={() => itemClickHandler(item.key)}
        >
          {item.label}
        </div>
        <div style={{ marginLeft: 20 }}>{childrenNode}</div>
      </div>
    );
  };
  useEffect(() => {
    return () => {
      console.log('卸载了');
    };
  }, []);
  return (
    <div className={styles['box-rm-test']}>
      <RecursionMenu list={mock} activeKey={location.hash.slice(1)} renderItem={renderItem} />
    </div>
  );
};

export default RMTest;
